<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 查询操作 -->
      <div class="filter-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-input
            v-model="formInline.giftCardName"
            clearable
            style="width: 200px"
            :placeholder="$t('请输入礼物卡名称')"
          />

          <el-select
            v-model="formInline.classificationId"
            clearable
            filterable
            :placeholder="$t('请选择礼物卡分类')"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :value="item.id"
              :label="item.classificationName"
            ></el-option>
          </el-select>

          <el-select
            v-model="formInline.shopId"
            clearable
            filterable
            :placeholder="$t('请选择门店')"
          >
            <el-option
              v-for="item in shops"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>

          <el-date-picker
            v-model="formInline.dateRange"
            type="datetimerange"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            :picker-options="datePickerShortcuts"
          >
          </el-date-picker>

          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >{{ $t("Search") }}</el-button
          >
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <h3>{{ $t("概况") }}</h3>
      <div class="table-layout">
        <el-row>
          <el-col :span="3" class="table-cell-title">{{
            $t("礼物卡总量")
          }}</el-col>
          <el-col :span="3" class="table-cell-title">{{
            $t("购卡总量")
          }}</el-col>
          <el-col :span="3" class="table-cell-title">{{
            $t("未使用/张")
          }}</el-col>
          <el-col :span="3" class="table-cell-title">{{
            $t("使用中/张")
          }}</el-col>
          <el-col :span="3" class="table-cell-title">{{
            $t("已停用/张")
          }}</el-col>
          <el-col :span="3" class="table-cell-title">{{
            $t("总充值金额")
          }}</el-col>
          <el-col :span="3" class="table-cell-title">{{ $t("总余额") }}</el-col>
          <el-col :span="3" class="table-cell-title">{{ $t("总消费") }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">{{ gift.numbers }}</el-col>
          <el-col :span="3" class="table-cell">{{ gift.saledNum }}</el-col>
          <el-col :span="3" class="table-cell">{{ gift.noUseNum }}</el-col>
          <el-col :span="3" class="table-cell">{{ gift.inUseNum }}</el-col>
          <el-col :span="3" class="table-cell">{{ gift.stopNum }}</el-col>
          <el-col :span="3" class="table-cell">{{
             NumberUtils.formatCurrency(gift.totalRechargeAmount)
          }}</el-col>
          <el-col :span="3" class="table-cell">{{
            NumberUtils.formatCurrency(gift.totalAmount)
          }}</el-col>
          <el-col :span="3" class="table-cell">{{
            NumberUtils.formatCurrency(gift.useAmount)
          }}</el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card">
      <h3>{{ $t("虚拟卡") }}</h3>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="userList"
        :element-loading-text="$t('Searching')"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          :label="$t('序号')"
          width="60"
          align="center"
          type="index"
          :index="(index) => (formInline.page - 1) * formInline.limit + index + 1"
        />
        <el-table-column align="center" :label="$t('礼物卡名称')" prop="name">
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('礼物卡分类')"
          prop="classificationName"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('礼物卡数量')"
          prop="numbers"
        >
          <template slot-scope="scope">
            <el-tag>{{
              scope.row.numbers == 0 ? $t("无限量") : scope.row.numbers
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('购卡数量')"
          prop="saledNum"
        />
        <el-table-column
          align="center"
          :label="$t('未使用/张')"
          prop="noUseNum"
        />
        <el-table-column
          align="center"
          :label="$t('使用中/张')"
          prop="inUseNum"
        />
        <el-table-column align="center" :label="$t('已停用/张')" prop="0">
          <template slot-scope="scope"> {{scope.row.stopNum}} </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('总充值金额')"
          prop="totalRechargeAmount"
          :formatter="NumberUtils.formatCurrencyInTable"
        />
        <el-table-column
          align="center"
          :label="$t('总余额')"
          :formatter="NumberUtils.formatCurrencyInTable"
          prop="totalAmount"
        />

        <el-table-column
          align="center"
          :label="$t('总消费')"
          :formatter="NumberUtils.formatCurrencyInTable"
          prop="useAmount"
        />
        <el-table-column
          align="center"
          :label="$t('更新时间')"
          prop="updateTime"
        >
          <template slot-scope="scope">
            {{ formatDateToYYYYMMDD(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('操作')">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleBind(scope.row)"
              v-permission="['GET /admin/p/card_virtual_statistic_list']"
              >{{ $t("详情") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="userTotal > 0"
        :total="userTotal"
        :page.sync="formInline.page"
        :limit.sync="formInline.limit"
        @pagination="getUserList"
      />
    </el-card>
  </div>
</template>

<script>
import { VirtualCardStatics, typeStatisticTotal } from "@/api/gift";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { allForPerm } from "@/api/shop";
import { cardClassificationList } from "@/api/cardClassification";
import NumberUtils from "../../utils/numberUtils";
import {datePickerShortcuts, formatDateToYYYYMMDD} from "../../utils/date";

export default {
  name: "VirtualCardStatics",
  components: { Pagination },
  data() {
    const typeMap = {
      1: this.$t("全场通用"),
      2: this.$t("指定类目"),
    };
    return {
      NumberUtils,
      formInline: {
        classificationId: undefined,
        dateRange:[],
        page: 1,
        limit: 10,
        sort: "add_time",
        order: "desc",
      },
      shops: [], //所有门店信息
      list: [],
      typeMap,
      gift: {},
      userList: [],
      userTotal: 0,
      listLoading: false,

      bindDialogVisible: false,
      bindForm: {
        id: undefined,
        entityCardCode: undefined,
      },
      datePickerShortcuts,
    };
  },
  created() {
    this.getDetail();
    this.getUserList();
    this.getCardClassification();
    allForPerm().then((response) => {
      this.shops = response.data.data.list;
    });
  },
  methods: {
    // 格式化日期为 yyyy-MM-dd
    formatDateToYYYYMMDD,

    // 获取概况数据（礼物卡总量、充值金额等）
    getDetail() {
      VirtualCardStatics(this.formInline).then((responnse) => {
        this.gift = responnse.data.data;
      });
    },

    // 获取虚拟卡统计的列表数据
    getUserList() {
      this.listLoading = true;
      typeStatisticTotal(this.formInline)
        .then((response) => {
          this.userList = response.data.data.list;
          this.userTotal = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.userList = [];
          this.userTotal = 0;
          this.listLoading = false;
        });
    },

    // 点击查询按钮时调用，刷新概况和列表数据
    handleFilter() {
      this.getUserList();
      this.getDetail();
    },

    // 查看绑定详情跳转
    handleBind(row) {
      this.$router.push({
        path: "/promotion/VirtualCardStatics/detail",
        query: { id: row.giftCardId },
      });
    },

    // 获取礼物卡分类列表
    getCardClassification() {
      const formInline = {
        classificationName: undefined,
        classificationStatus: undefined,
        page: 1,
        limit: 1000,
        sort: "add_time",
        order: "desc",
      };
      cardClassificationList(formInline)
        .then((response) => {
          this.list = response.data.data.list;
        })
        .catch(() => {
          this.list = [];
        });
    },
  },
};
</script>

<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}
.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}
.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
